<template>
	<el-form ref="formRef" :model="formModel" :rules="formRules" class="login-form p-4">
		<el-form-item prop="username" class="enter-x">
			<el-input v-model="formModel.username" placeholder="请输入账号" clearable>
				<template #prefix>
					<el-icon><SvgIcon name="ep:user" /></el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item prop="password" class="enter-x">
			<el-input :type="showPwd ? 'text' : 'password'" v-model="formModel.password" placeholder="请输入密码" clearable>
				<template #prefix>
					<el-icon><SvgIcon name="ep:key" /></el-icon>
				</template>
				<template #suffix>
					<el-icon @click="showPwd = !showPwd" class="cursor-pointer">
						<SvgIcon name="ep:view" v-if="showPwd" />
						<SvgIcon name="nimbus:eye-off" v-else />
					</el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item prop="code" class="enter-x">
			<el-col :span="15">
				<el-input v-model="formModel.code" placeholder="请输入验证码" clearable>
					<template #prefix>
						<el-icon><SvgIcon name="ep:position" /></el-icon>
					</template>
				</el-input>
			</el-col>
			<el-col :span="1" />
			<el-col :span="8">
				<el-button class="w-full" @click="refreshCode">
					<span class="font-bold" style="letter-spacing: 5px">{{ codeVal }}</span>
				</el-button>
			</el-col>
		</el-form-item>
		<el-form-item class="enter-x">
			<el-button v-reClick :loading="formLoading" @click="onLogin(formRef)" class="w-full" type="primary">
				<span class="text-lg">登 录</span>
			</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup lang="ts" name="LoginAccount">
import { useUserStore } from '@/store'
import { creatCode } from '@/utils'
import { FormInstance, FormRules } from 'element-plus'
interface FormType {
	username: string
	password: string
	code: string
}

const showPwd = ref<boolean>(false)
const codeVal = ref<string>('8899')
const formRef = ref()
const formModel = reactive<FormType>({
	username: '',
	password: '',
	code: ''
})
const formLoading = ref<boolean>(false)
const validateCode = (rule: any, value: any, callback: any) => {
	if (value.toUpperCase() !== codeVal.value) {
		callback(new Error('验证码错误！'))
	} else {
		callback()
	}
}
const formRules = reactive<FormRules<FormType>>({
	username: [
		{ required: true, message: '账号必须填写！', trigger: 'blur' },
		{ min: 5, message: '请输入正确的账号！', trigger: 'blur' }
	],
	password: [
		{ required: true, message: '密码必须填写', trigger: 'blur' },
		{ min: 5, message: '请输入正确的密码！', trigger: 'blur' }
	],
	code: [
		{ required: true, message: '验证码必须填写！', trigger: 'blur' },
		{ len: 5, message: '验证码错误！', trigger: 'blur' },
		{ validator: validateCode, trigger: 'blur' }
	]
})

//表单验证
const formValidate = (formEl: FormInstance) => {
	return new Promise((resolve) => {
		formEl.validate((valid: boolean) => {
			if (valid) {
				resolve(valid)
			} else {
				refreshCode() //刷新验证码
				formLoading.value = false
			}
		})
	})
}
//提交操作
const onLogin = async (formEl: FormInstance) => {
	formLoading.value = true
	await formValidate(formEl)

	await useUserStore()
		.login({
			password: formModel.password,
			username: formModel.username,
			mode: 'message' //不要默认的错误提示
		})
		.finally(() => {
			refreshCode() //刷新验证码
			formLoading.value = false
		})
}

// 刷新验证码
const refreshCode = () => {
	codeVal.value = creatCode(5, 1).toUpperCase()
}
// 页面加载时
onMounted(() => {
	refreshCode()
})
</script>

<style scoped lang="scss"></style>
